<template>
  <div v-show="editShow">
    <div class="container">
      <el-row :gutter="20">
        <div class="clearfix">
          <div class="crumbs">
            <i class="el-icon-back"></i>
            <el-button type="text" @click="goBack">返回</el-button>
          </div>
          <div class="btn-save">
            <el-button type="primary" @click="addsaveClick('formData')">确 定</el-button>
          </div>
        </div>
        <div class="form-box">
          <el-form ref="formData" :model="formData" :rules="rules"  label-width="140px" class="eidt-el-form">
            <el-form-item label="名称" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <el-input v-model="formData.price" type="number" min="1"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="startDate">
              <el-date-picker v-model="formData.startDate" type="datetime" placeholder="使用开始时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endDate">
              <el-date-picker v-model="formData.endDate" type="datetime" placeholder="使用结束时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="">
              <label  style="color:#f20;font-size:16px;">实体票图片</label>
            </el-form-item>
            <UploadImg @uploadImg="getUploadImg2" :editImg="editImg2" :imgTitle="imgTitle2"></UploadImg>
            <el-form-item label="">
              <label  style="color:#f20;font-size:16px;">购票图片</label>
            </el-form-item>
            <UploadImg @uploadImg="getUploadImg1" :editImg="editImg1" :imgTitle="imgTitle1"></UploadImg>
            <el-form-item label="表单图宽度" >
              <el-input v-model="formData.person" type="number" ></el-input>
            </el-form-item>
            <el-form-item label="表单图高度" >
              <el-input v-model="formData.number" type="number" ></el-input>
            </el-form-item>
            <el-form-item label="表单上边距" >
              <el-input v-model="formData.top" type="number" ></el-input>
            </el-form-item>
            <el-form-item label="">
              <label  style="color:#f20;font-size:16px;">电子票图片</label>
            </el-form-item>
            <UploadImg @uploadImg="getUploadImg" :editImg="editImg" :imgTitle="imgTitle"></UploadImg>
            <el-form-item label="票图片宽度" prop="width">
              <el-input v-model="formData.width" type="number" min="1"></el-input>
            </el-form-item>
            <el-form-item label="票图片高度" prop="height">
              <el-input v-model="formData.height" type="number" min="0"></el-input>
            </el-form-item>
            <el-form-item label="二维码左边距" prop="qrcodeX">
              <el-input v-model="formData.qrcodeX" type="number" min="0"></el-input>
            </el-form-item>
            <el-form-item label="二维码上边距" prop="qrcodeY">
              <el-input v-model="formData.qrcodeY" type="number" min="0"></el-input>
            </el-form-item>
            <el-form-item label="二维码大小" prop="qrcodeSize">
              <el-input v-model="formData.qrcodeSize" type="number" min="0"></el-input>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="show()">预览</el-button>
            </el-form-item>
          </el-form>
          <div class="img-box"><el-image :src="editImg"></el-image>
          <div id="qrcode" ref="qrcode" :style="style"></div>
          </div>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import UploadImg from "../../public/UploadImg";
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
      //角色列表数据
      rules: {
        name: [{ required: true, message: "类型名称不能为空", trigger: "blur" }],
        price: [{ required: true, message: "价格不能为空", trigger: "blur" }],
        endDate: [{ required: true, message: "结束日期不能为空", trigger: "blur" }],
        startDate: [{ required: true, message: "开始日期不能为空", trigger: "blur" }],
        qrcodeSize: [{ required: true, message: "二维码大小不能为空", trigger: "blur" }],
        qrcodeX: [{ required: true, message: "二维码X坐标不能为空", trigger: "blur" }],
        qrcodeY: [{ required: true, message: "二维码Y坐标不能为空", trigger: "blur" }],
        height: [{ required: true, message: "页面高度不能为空", trigger: "blur" }],
        width: [{ required: true, message: "页面宽度不能为空", trigger: "blur" }],
      },
      defaultProps: {
        label: "name"
      },
      dialogVisible: false,
      formData: {
        projectId:localStorage.getItem('project_Id'),
        name: "",
        number: 0,
        price: 0,
        person: 0,
        width: 0,
        height: 0,
        banner:"",
        top:0,
        url:"",
        qrcodeX: 0,
        qrcodeY: 0,
        rule:"",
        qrcodeSize: "",
        startDate: "",
        endDate: ""
      },
      style:{position: "absolute",display:"none"},
      editImg:"",
      editImg1:"",
      editImg2:"",
      formeditData: {},
      ticketType_Id: -1,
      imgTitle:'电子票图片',
      imgTitle1:'购票图片',
      imgTitle2:'实体票图片'
    };
  },
  props:{
    editShow: {
      type: Boolean,
      default: false
    },
    editData: {
      type: Object
    }
  },
  watch: {
    editData: function() {
      const item = this.editData;
      this.formData = item;
      this.editImg = item.url;
      this.editImg1 = item.rule;
      this.editImg2 = item.banner;
      this.ticketType_Id = item.ticketTypeId;
      this.show();
    }
  },
  created(){
    
  },
  methods: {
    show(){
       document.getElementById('qrcode').innerHTML = ''
       let qrcode = new QRCode('qrcode', {
        text:"qrcode",
        width: (this.formData.qrcodeSize/this.formData.width* 400), 
        height: (this.formData.qrcodeSize/this.formData.width* 400), 
        colorDark : "#000000", //前景色
        colorLight : "#ffffff", //背景色
        typeNumber:4, 
        correctLevel : QRCode.CorrectLevel.H 
     })
      this.style={
        left: (this.formData.qrcodeX/this.formData.width* 400)+"px",
        top: (this.formData.qrcodeY/this.formData.width* 400)+"px",
        width:(this.formData.qrcodeSize/this.formData.width* 400)+"px",
        height:(this.formData.qrcodeSize/this.formData.width* 400)+"px",
      };
    },
    nodebg(val) {
      bus.$emit("putrole", val.project_Role_Id);
    },
    addsaveClick(formData) {
      var s = new Date(this.formData.startDate)
      var state_date = s.getFullYear() + "-" + (s.getMonth() + 1) + "-" + (s.getDate() < 10 ? "0" + s.getDate() : s.getDate()) + " " + s.getHours()+":"+ s.getMinutes()+":" + s.getSeconds();
      var e = new Date(this.formData.endDate)
      var end_date = e.getFullYear() + "-" + (e.getMonth() + 1) + "-" + (e.getDate() < 10 ? '0' + e.getDate() : e.getDate()) + " " + e.getHours()+":" + e.getMinutes()+":" + e.getSeconds();
      this.formData.startDate =state_date; 
      this.formData.endDate= end_date;

      this.$refs[formData].validate(valid => {
        if (valid) {
          if (this.ticketType_Id == -1) {
            this.$axios.post('/TicketType/',this.formData)
              .then(res =>{
                if (res.data.hasError == false) {
                  this.$message.success("添加成功！");
                  this.$refs[formData].resetFields();
                  this.goBack();
                }
              })
          }else {
            this.$axios.put(`/TicketType/${this.ticketType_Id}`,this.formData)
              .then(res =>{
                if (res.data.hasError == false) {
                  this.$message.success("修改成功！");
                  this.$refs[formData].resetFields();
                  this.ticketType_Id = -1;
                  this.goBack();
                }
              })
          }
          this.dialogVisible = false;
        }
      });
    },
    closeVisible(formData){
      this.$refs[formData].resetFields();
      this.dialogVisible = false
    },
    getById(data){
      bus.$emit('getTicketTypeId',data.ticketTypeId)
    },
    goBack() {
      this.$emit("backFunStu");
      this.$refs['formData'].resetFields();
      this.editImg="";
      this.editImg1="";
      this.editImg2="";
      this.ticketType_Id=-1;
    },
    getUploadImg(imgSrc){
      this.editImg=imgSrc;
      this.formData.url = imgSrc;
    },
    getUploadImg1(imgSrc1){
      this.editImg1=imgSrc1;
      this.formData.rule = imgSrc1;
    },
    getUploadImg2(imgSrc2){
      this.editImg2=imgSrc2;
      this.formData.banner = imgSrc2;
    }
  },
  components: {
    UploadImg
  }
};
</script>
<style lang="scss" scope>
    .img-box{float: right;width:400px ;position: absolute;top: 80px;right: 0px;}
    img{width: 100%;}
    #qrcode{position: absolute;}
</style>